<template>
  <div class="app" :class="$device === 'android' ? 'android' : 'ios'">
    <router-view></router-view>
  </div>
</template>

<script>
import { Loading, Overlay, Empty, Button } from "vant";
export default {
  name: "App",
  components: {
    [Loading.name]: Loading,
    [Overlay.name]: Overlay,
    [Empty.name]: Empty,
    [Button.name]: Button,
  },
  computed: {},
  methods: {
    reload() {
      window.location.reload();
    },
  },
};
</script>

<style lang="less">
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.loading-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.van-tab--active {
  font-weight: 600;
}
.van-nav-bar {
  width: 100%;
  position: sticky;
  top: 0;
}
.ios {
  //
}
.android {
  padding-top: 1px;
}
@supports (
    (height: constant(safe-area-inset-top)) or
      (height: env(safe-area-inset-top))
  )
  and (-webkit-overflow-scrolling: touch) {
  .fullscreen {
    /* 适配齐刘海 */
    padding-top: 40px;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);

    /* 适配底部小黑条 */
    padding-bottom: 32px;
    padding-bottom: costant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
@supports (-webkit-overflow-scrolling: touch) {
  /* 适配ios 非齐刘海机型 */
}
/* iphone x / xs / 11 pro*/
// 文明手机
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
  }
}
/* iphone xr / 11 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .ios {
  }
}
/* iphone xs max / 11 pro max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
  }
}
/* iphone 12 pro */
@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
  }
}
</style>
